import React from 'react';
import * as echarts from 'echarts';

export interface ChartProps {
  text?: string;
  width?: number;
  height?: number;
  data?: any;
  data2?: any;
  freshNum?: 1;
}
let theChat: any = React.createRef();
const EchartInOut: React.FC<ChartProps> = (props: ChartProps) => {
  React.useEffect(() => {
    const myChart = echarts.init(theChat);
    const year = new Date().getFullYear();

    const option = {
      title: {
        text: props.text,
        textStyle: {
          fontSize: 14,
          fontWeight: 'bold',
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      legend: {
        show: false,
      },
      grid: {
        left: '1%',
        right: '1%',
        bottom: '1%',
        top: '15%',
        containLabel: true,
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
      },
      yAxis: {
        type: 'category',
        data: ['销售额', '采购额', '年产值'],
      },
      series: [
        {
          name: (year - 1).toString(),
          type: 'bar',
          data: [props.data2.amtOrder, props.data2.amtPO, props.data2.amtChanZhi],
        },
        {
          name: year.toString(),
          type: 'bar',
          data: [props.data.amtOrder, props.data.amtPO, props.data.amtChanZhi],
        },
      ],
    };

    // 绘制图表
    myChart.setOption(option);
  }, [props.freshNum, props.data, props.data2]);
  return <div ref={(ref) => (theChat = ref)} style={{ height: props.height }}></div>;
};
export default EchartInOut;
